<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 危化品总览"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" :gutter="10" style="margin: 0;padding-bottom:0" v-if="zfNameflag">
      <el-col :span="8" class="content-left">
        <el-col class="box">
          <div class="title">危化品概览</div>
          <div class="content-body">
            <el-row type="flex" justify="space-around" class="rightTop">
              <el-col :span="7" class="rightTopBox">
                <div>危化品企业数</div>
                <div>{{hzEntQty}}</div>
              </el-col>
              <el-col :span="7" class="rightTopBox">
                <div>危化品名录</div>
                <div>{{hzTypeQty}}</div>
              </el-col>
              <el-col :span="7" class="rightTopBox">
                <div>重点监管危化品种类</div>
                <div>{{majorHzTypeQty}}</div>
              </el-col>
            </el-row>
            <el-row class="rightTopBottom">
              <el-col>
                <div id="overview" style="width: 100%; height: 200px"></div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">危化品企业名录</div>
          <div class="content-body">
            <div class="tabs">
              <div
                :class="active === 0 ? 'selectActive' : ''"
                @click="activeClick(0)"
              >
                生产企业
              </div>
              <div
                :class="active === 1 ? 'selectActive' : ''"
                @click="activeClick(1)"
                style="border-left: 1px solid #7db2d0"
              >
                经营企业
              </div>
              <div
                :class="active === 2 ? 'selectActive' : ''"
                @click="activeClick(2)"
                style="border-left: 1px solid #7db2d0"
              >
                运输企业
              </div>
              <!-- <div
                :class="active === 3 ? 'selectActive' : ''"
                @click="activeClick(3)"
                style="border-left: 1px solid #7db2d0"
              >
                其他
              </div> -->
            </div>
            <div id="tableColor">
              <el-table
                ref="table"
                :data="tableData"
                style="width: 100%"
                height="370"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0' }"
                stripe
                :default-sort = "{prop: 'parkName'}"
                :row-class-name="tableRowClassName"
              >
                <el-table-column
                  property="entName"
                  :show-overflow-tooltip="true"
                  label="企业名称"
                ></el-table-column>
                <el-table-column
                  property="parkName"
                  width="120"
                  sortable
                  :show-overflow-tooltip="true"
                  label="园区名称"
                ></el-table-column>
                <el-table-column
                  v-if="active!==2"
                  property="hzTypeName"
                  width="100"
                  align="center"
                  :show-overflow-tooltip="true"
                  label="危化品种类"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col
        :span="8"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5)"
      >
        <div id="map" style="width: 100%; height: 506px"></div>
        <div class="box" style="margin-top: 10px">
          <div class="title">危化品运输</div>
          <div class="content-body" style="overflow: hidden">
            <div
              id="transport"
              style="width: 60%; float: left; height: 192px"
            ></div>
            <div class="source" style="width: 40%; float: left; height: 192px">
              <div>
                <div>运输企业数</div>
                <div>{{transportationEntQty}}</div>
              </div>
              <div>
                <div>运输车辆数</div>
                <div>{{carQty}}</div>
              </div>
              <div>
                <div>驾驶员数</div>
                <div>{{personnelQty}}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col
        :span="8"
        class="content-center"
        style="background-color: (255, 255, 255, 0.5)"
      >
        <el-row>
          <el-col class="box">
            <div class="title">园区危化品分布情况</div>
            <div class="content-body">
              <div id="dangerType" style="width: 100%; height: 246px"></div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="box">
            <div class="title">园区危化品装卸货情况</div>
            <div class="content-body" style="margin-top: 8px;">
              <div id="loading" style="width: 100%; height: 394px"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const echarts = require("echarts");
import dd from 'gdt-jsapi'
import govheader from "@/components/govheader";
import govnavigation from '@/components/govnavigation'
export default {
  name: "zfDangerousGoods",
  components: { govheader, govnavigation },
  data() {
    return {
      zfNameflag: true,
      hzEntQty: "",
      hzTypeQty: "",
      majorHzTypeQty: "",
      businessEnterprisesList: [],
      manufacturingEnterprisesList: [],
      transportationEnterprisesList: [],
      transportationEntQty: '',
      carQty:'',
      personnelQty: '',
      tableData: [],
      active: 0,
      myChart1: "",
      option1: "",
      myChart2: "",
      option2: "",
      myChart3: "",
      option3: "",
      myChart4: "",
      option4: "",
      myChart5: "",
      option5: "",
      center: { lng: 119.501611, lat: 29.483372 },
      map: "",
      zoom: 12,
    };
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({}).then(res =>{
        if (res) {
          let params = {
            applicationFlag: '20',
            authCode: res.auth_code
          }
          this.$http.post(`/home/sys/loginfree/authentication`, params)
            .then(({ data: res }) => {
              console.log('res2:',res);
              this.$store.commit('zfName', res.data.lastName)
              if (res.code !== 0) {
                this.zfNameflag = false
              }
            }).catch(() => {
              this.zfNameflag = false
            })
        }
      }).catch(() => {
        this.zfNameflag = false
      })
    }
  },
  mounted() {
    let _this = this
    this.getOverview();
    this.getTransport();
    this.getDangerType();
    this.getLoading();
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth()+1
    let day = date.getDate()-1
    let time = String(year) + String(month) + String(day)
    this.$http.post(`/home/government/hazardousChemicalsOverview/info`, {
      searchDate: time,
    })
    .then(({ data: res }) => {
      this.hzEntQty = res.data.hzOverview.hzEntQty
      this.hzTypeQty = res.data.hzOverview.hzTypeQty
      this.majorHzTypeQty = res.data.hzOverview.majorHzTypeQty
      res.data.hzOverview.hzEntTypeList.forEach((item,index) =>{
        if (index < 3) {
          this.option1.series[0].data.push(item)
        } else {
          this.option1.series[1].data.push(item)
        }
      })
      this.tableData = this.manufacturingEnterprisesList = res.data.HzEntDirectory.manufacturingEnterprises
      this.businessEnterprisesList = res.data.HzEntDirectory.businessEnterprises
      this.transportationEnterprisesList = res.data.HzEntDirectory.transportationEnterprises
      clearInterval(_this.intervalId);
      let map1 = {};
      res.data.mapParkCarQty.forEach((item) => {
        map1[item.parkName] = [item.longitude, item.latitude,item.inGoodsNum,item.outGoodsNum];
      });
      this.center = map1;
      this.transportationEntQty = res.data.hzTransportation.transportationEntQty
      this.carQty = res.data.hzTransportation.carQty
      this.personnelQty = res.data.hzTransportation.personnelQty
      this.option3.series[0].data = res.data.hzTransportation.safeCode.map(item=>{
        return {
          name: item.safeCode,
          value:item.provinceQty + item.outsideProvinceQty,
          inner: item.provinceQty,
          out:item.outsideProvinceQty
        }
      })
      this.option4.series[0].data = res.data.hzCategory.entValue
      this.option4.series[1].data = res.data.hzCategory.typeValue
      this.option4.xAxis[0].data = res.data.hzCategory.name
      this.option5.yAxis[0].data = res.data.parkLoadingUnloading.parkName
      this.option5.series[0].data = res.data.parkLoadingUnloading.outGoodsNum
      this.option5.series[1].data = res.data.parkLoadingUnloading.inGoodsNum
      this.myChart1.setOption(this.option1)
      this.myChart3.setOption(this.option3)
      this.myChart4.setOption(this.option4)
      this.myChart5.setOption(this.option5)
      this.getright_table()
      this.renderMyChart();
    })
    .catch(() => {});
  },
  methods: {
    zfNameflagChange(val) {
      this.zfNameflag = val;
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    getOverview() {
      let _this = this
      // // 基于准备好的dom，初始化echarts实例
      this.myChart1 = echarts.init(document.getElementById("overview"));
      // 绘制图表
      this.option1 = {
        // title: {
        //   subtext: "0",
        //   text: "企业总数",
        //   left: 183,
        //   top: 80,
        //   textAlign: "center",
        //   textStyle: {
        //     fontSize: 12,
        //   },
        //   subtextStyle: {
        //     fontSize: 20,
        //   },
        // },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}家",
          extraCssText:'z-index: 100'
        },
        legend: {
          orient: "vertical",
          top: 50,
          right: 20,
          textStyle: {
            fontSize: 12,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["55%"],
            center: ["40%", "50%"],
            label: {
              normal: {
                show: false,
                position: "outside",
                formatter: "{d}%",
              },
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "14",
                fontWeight: "700",
                position: "left",
              },
            },
            data: [],
          },
          {
            type: "pie",
            radius: ["65%", "80%"],
            center: ["40%", "50%"],
            label: {
              normal: {
                show: false,
                position: "outside",
                formatter: "{d}%",
              },
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "14",
                fontWeight: "700",
                position: "left",
              },
            },
            data: [],
          },
        ],
      };
      this.myChart1.setOption(this.option1);
      this.autoPlay(_this.myChart1, _this.option1, "startCharts1");
    },
    getright_table() {
      var isScroll = true;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent("on" + sEvent, fn);
      } else {
        obj.addEventListener(sEvent, fn, false);
      }
    },
    activeClick(val) {
      let _this = this
      this.active = val;
      if (val === 0) {
        this.tableData = this.manufacturingEnterprisesList
      } else if (val === 1) {
        this.tableData = this.businessEnterprisesList
      } else if (val === 2) {
        this.tableData = this.transportationEnterprisesList
      }
      clearInterval(_this.intervalId);
      this.$refs.table.bodyWrapper.scrollTop = 0;
      this.getright_table();
    },
    getTransport() {
      let _this = this
      this.myChart3 = echarts.init(document.getElementById("transport"));
      this.option3 = {
        tooltip: {
          trigger: "item",
          confine: true,
          extraCssText:'white-space:normal;word-break:break-all',
          formatter: function (data) {
            return (
              data.data.name +
              "<br/>省内: | " +
              data.data.inner +
              "<br/>省外: | " +
              data.data.out
            );
          },
        },
        legend: {
          top: 165,
          textStyle: {
            fontSize: 12,
          },
        },
        color: ["#65D77B","#FF8C2F", "#F63F5E"],
        series: [
          {
            type: "pie",
            center: ["50%", "40%"],
            radius: "70%",
            label: {
              normal: {
                show: false,
                position: "outside",
                formatter: function (data) {
                  return (
                    data.data.name +
                    "\n省内: | " +
                    data.data.inner +
                    "\n省外: | " +
                    data.data.out
                  );
                },
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 15,
                rich: {
                  time: {
                    fontSize: 10,
                    color: "#999",
                  },
                },
              },
            },
            // labelLine: {
            //   length: 20,
            //   length2: 30,
            //   maxSurfaceAngle: 80,
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "14",
            //     fontWeight: "700",
            //     position: "left",
            //   },
            // },
            data: [],
          },
        ],
      };
      this.myChart3.setOption(this.option3);
      this.autoPlay(_this.myChart3, _this.option3, "startCharts3");
    },
    getDangerType() {
      let _this = this
      this.myChart4 = echarts.init(document.getElementById("dangerType"));
      this.option4 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ["#00A3FF", "#00DBD4", "#A885F0", "#5F83FF", "#65D77B"],
        legend: {
          top: 0,
          right: 10
        },
        grid: {
          top: '10%',
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true,
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 8,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval:0,
              rotate:40
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '危化品企业数',
            type: 'bar',
            data: []
          },
          {
            name: '危化品种类',
            type: 'bar',
            data: []
          },
        ],
      };
      this.myChart4.setOption(this.option4);
      this.autoPlay(_this.myChart4, _this.option4, "startCharts4");
    },
    getLoading() {
      // let _this = this
      this.myChart5 = echarts.init(document.getElementById("loading"));
      this.option5 = {
        animationDuration: 5000,
        tooltip: {
          trigger: "axis",
        },
        color: ["#13B9FB","#00F1E9"],
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 15,
            yAxisIndex: [0],
            zoomLock: true,
          },
        ],
        legend: {
          top: 0,
          right: 0,
        },
        grid: {
          top: '10%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: [],
          },
        ],
        series: [
          {
            name: "卸货",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
              position: "inside",
            },
            emphasis: {
              focus: "series",
            },
            data: [],
          },
          {
            name: "装货",
            type: "bar",
            stack: "Total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [],
          }
        ],
      };
      this.myChart5.setOption(this.option5);
      // this.autoPlay(_this.myChart5, _this.option5, "startCharts5");
    },
    // 浙江省地图
    renderMyChart() {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById("map"));
      let uploadedDataURL = require("./zhejiang.json");
      // this.center = {
      //   点1: [119.228955, 29.188679],
      //   点2: [119.87286, 29.804324],
      //   点3: [120.516766, 28.496163],
      //   点4: [121.767782, 29.74012],
      //   点5: [120.295998, 30.813982],
      // };
      let scatterData1 = [];
      let scatterData2 = [];
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item));
      }
      //   for (let item in this.center2) {
      //     scatterData2.push(this.center2[item].concat(item))
      //   }
      echarts.registerMap("js", uploadedDataURL);
      this.option2 = {
        title: {
          text: "浙江省化工产业分布",
          top: "10px",
          textStyle: {
            width: "100%",
            color: "#1c4ca1",
            "font-weight": 700,
          },
        },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9999',
          // backgroundColor:'rgba(19, 130, 221,0.6)',
          backgroundColor: null,
          borderColor: '#333',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color:'#ffffff'
          },
          formatter: function (para) {
            if (para.seriesType === 'effectScatter') {
              return '<div style="text-align: left;font-size:12px;color:#ffffff;width:200px;overflow:hidden;white-space: pre-wrap;border-top:2px solid #02D9FD;border-bottom:2px solid #02D9FD;background: linear-gradient(90deg,rgba(0,93,220,.1) 0%, rgba(0,93,220,.8) 50%, rgba(0,93,220,.1) 100%);border-image: linear-gradient(90deg,rgba(7,216,247,0) 0%,rgba(7,216,247,.8) 50%, rgba(7,216,247,0) 100%) 2 2 2 2">'
                      +'<div style="text-align: center;font-size:16px;font-weight:600;color:#02D9FD;">'+ para.data[4] + '</div>'
                      +'<div>今日危化品装货总量: '+ para.data[2] + 't</div>'
                        + '<div>今日危化品卸货总量: '+ para.data[3] + 't</div>'
                      +'</div>'
            } else {
              return ''
            }
          }
        },
        geo: [
          {
            map: "js",
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: "100%",
            layoutCenter: ["50%", "55%"],
            zoom: 0.9,
            itemStyle: {
              areaColor: "rgba(156, 216, 255, 0.7)",
              borderColor: "rgb(27, 172, 255)",
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                areaColor: "rgba(156, 216, 255, 0.7)",
              },
              label: {
                show: true,
                color: "#333333",
              },
            },
            label: {
              show: true,
              color: "#333333",
            },
            zlevel: 3,
          },
        ],
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            itemStyle: {
              normal: {
                color: "rgb(0, 141, 221)",
              },
            },
            label: {
              // normal: {
                formatter: function (para) {
                  return '';
                },
              //   position: "right",
              //   color: "#333333",
              //   borderColor: "#005DDC",
              //   borderWidth: 1,
              //   borderType: "solid",
              //   padding: 5,
              //   backgroundColor: "rgba(255, 255, 255, 1)",
              //   show: false,
              // },
              emphasis: {
                show: true,
              },
            },
            emphasis: {
              label: {
                show: true
              },
              itemStyle: {
                color: 'rgb(255, 155, 55)',
                borderColor: 'rgb(255, 155, 55)',
                borderWidth: 6
              }
            },
            symbol: "circle",
            symbolSize: 6,
            data: scatterData1,
            zlevel: 10,
          },
        ],
      };
      this.myChart2.setOption(this.option2);
      this.mapAutoPlay(_this.myChart2, _this.option2, 'startCharts2')
    },
    // 自动播放
    autoPlay(myChart, option, timer) {
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        flag = false;
        clearInterval(timer);
        //取消之前高亮图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });

        charPiecurrentIndex = param.dataIndex;
        //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        //高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: param.dataIndex,
        });
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      timer = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000);
          flag = true;
        }
      });
    },
    mapAutoPlay(myChart, option, timer) {
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        if (param.componentType === 'series') {
          flag = false;
          clearInterval(timer);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
        }
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      //高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });

      timer = setInterval(chartHover, 5000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 5000);
          flag = true;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.top {
  height: 80px;
  line-height: 60px;
  box-sizing: border-box;
  color: rgb(115, 188, 235);
  background-image: url("../../../assets/img/zf/top_bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
  font-size: 16px;
}
.content {
  padding: 10px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
}
.rightTop {
  width: 100%;
  .rightTopBox {
    background-color: rgb(197, 223, 249);
    padding: 5px;
    border-radius: 5px;
    > div:first-child {
      color: #1c4ca1;
      font-size: 12px;
    }
    > div:last-child {
      height: 22.4px;
      color: #00a3ff;
      font-size: 20px;
      text-align: right;
    }
  }
}
.rightTopBottom {
  width: 100%;
}
.tabs {
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  width: 12px;
  height: 10px;
}

//滚动条的滑块
.main ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 90, 255, 0.1);
  border-radius: 5px;
}
/deep/ .BMap_cpyCtrl {
  display: none;
}
/deep/ .anchorBL {
  display: none;
}
.intrdouce {
  width: 144px;
  left: 20px;
  bottom: 20px;
  position: absolute;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  color: #ffffff;
  overflow: hidden;
  .legend-body {
    text-align: center;
    margin: 6px;
    height: 40px;
    padding: 10px 0px 10px 15px;
  }
  .legend-title {
    font-size: 15px;
    font-weight: bold;
    float: left;
    line-height: 20px;
  }
  .legend-icon {
    float: left;
    margin-right: 10px;
  }
}
.goback {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  color: #1c4ca1;
  cursor: pointer;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  > span {
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #1c4ca1;
    color: #ffffff;
    text-align: center;
    margin-right: 5px;
  }
}
.content-center {
  .left_baidu {
    position: relative;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    height: 770px;
    margin: 0px auto;
  }
}
.ulList {
  margin-top: 20px;
  li {
    list-style: none;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px dashed #aecaf2;
    > div:first-child {
      float: left;
    }
    > div:last-child {
      float: right;
      color: #00a3ff;
    }
  }
}
.securityBottom {
  width: 100%;
  background-color: #e0ebfe;
  border-radius: 5px;
  > div {
    margin: 5px auto;

    > div {
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    > div:last-child {
      color: #4972ff;
      font-size: 20px;
    }
  }
  .securityBottomCenter {
    border-left: 1px solid #aecaf2;
    border-right: 1px solid #aecaf2;
  }
}
.overview {
  height: 47.5px;
  line-height: 47.5px;
}
.source > div {
  border: 1px solid #c2daff;
  background-color: #d9e7ff;
  width: 143px;
  margin: 0 auto 10px;
  border-radius: 5px;
  padding: 10px;
  > div:first-child {
    color: #4b5463;
    font-size: 12px;
  }
  > div:nth-child(2) {
    color: #4972ff;
    text-align: right;
    font-size: 18px;
  }
}
</style>
